<template>
  <div class="header">
    <div class="logo"></div>
    <div class="nav">
      <el-menu
        router
        :default-active="activeIndex"
        @select="handleSelect"
        class="header"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="/page/oauth">Oauth应用管理</el-menu-item>
        <el-menu-item index="mail">站内信</el-menu-item>
        <el-menu-item index="info">个人信息</el-menu-item>
        <el-menu-item index="setting">设置</el-menu-item>
        <el-menu-item index="logout">退出登录</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
  export default {
    name: "PeskHeader",
    data() {
      return {
        activeIndex: "none"
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        switch (key) {
          case "nacos":
            window.location.href = "http://127.0.0.1:8848/nacos";
            break;
          case "logout":
            this.logout()
            break;
        }
      },
      logout() {
        this.$AxiosUtil.get('/logout').then(res => {
          if (res.success) {
            this.$store.commit('Logout')
          }
        })
      }
    }
  }
</script>

<style scoped>
  .header {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: flex-start;
    background-color: #545c64;
  }

  .logo {
    width: 180px;
    height: 60px;
    background-image: url("../assets/logo.png");
    background-size: 80% 100%;
    background-repeat: no-repeat;
    background-position-x: 35px;
  }

  .nav {
    width: calc(100% - 300px);
    height: 60px;
    margin-left: 70px;
    margin-right: 50px;
  }

  .nav .header {
    display: flex;
    justify-content: flex-end;
  }
</style>
